<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09_猜数字练习</title>
</head>
<body>
<h3>已生成一个1-100之间的随机数</h3>
<input  type="text" placeholder="清楚如你猜的数字">
<button onclick="guess()">点我验证</button>
<h3>小提示：<span></span></h3>
<script>
    //1.生成一个随机数
    //Math.random()生成的事[0,1)之间的随机小数
    //[0,1)*100=>[0,100)+1=>[1,101)
    let n = parseInt(Math.random()*100)+1;
    console.log('打个小抄:'+n);
    //6.定义变量用来统计猜的次数
    var count = 0;
    //2.定义猜数字的方法
    function guess() {
        //3.拿到用户猜的数字
        let num = document.querySelector('input').value;
        //8.对用户输入的数据进行校验
        //一对斜杠用来包裹正则表达式
        //^标识开头 $表示开头和结尾  \d表示数字  +表示至少一个
        //test()用来判断参数是否匹配前面的正则表达式
        if (!/^\d+$/.test(num)){
            alert('请输入数字!');
            return;
        }
        //4.获取用来显示结果的span元素
        let spanE = document.querySelector('span');
        //7.每猜一次，统计猜的次数+1
        count++;
        //5.作比较
        if (num>n){
            spanE.innerHTML = '猜大了！';
        }else if (num < n){
            spanE.innerHTML = '猜小了！';
        }else {
            spanE.innerHTML = '恭喜你猜了'+count+'次猜对了！';
        }
    }
</script>
</body>
</html>